@extends('layout.home')
@section('title', '管理报表')
@section('content')
    <style>
        *{padding: 0;margin: 0;}
        html,body{width: 100%;height: 100%;}
    </style>
    <div id="header" style="background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center">动态报表展示</div>
{{--    <div class="datatimebox">--}}
{{--        <input type="text" id="result1" placeholder="开始时间" style="text-align: center">--}}
{{--        <button id="demo2" data-options="{&quot;type&quot;:&quot;date&quot;,&quot;beginYear&quot;:2019,&quot;endYear&quot;:2030}" class="btn mui-btn mui-btn-block">选择日期 ...</button>--}}
{{--        <input type="text" id="result2" placeholder="结束时间" style="text-align: center">--}}
{{--        <button id="demo3" data-options="{&quot;type&quot;:&quot;date&quot;,&quot;beginYear&quot;:2019,&quot;endYear&quot;:2030}" class="btn mui-btn mui-btn-block">选择日期 ...</button>--}}
{{--        <button style="width: 100%;" class="oksearch mui-btn mui-btn-warning" onclick="dosearch()" id="alertBtn">查询</button>--}}
{{--        <button id="alertBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">查询</button>--}}
{{--    </div>--}}
    <p style="text-align: center;font-size: 20px;font-weight: bold;color: black;">工时统计表</p>
    <div id="main1" style="height:300px;margin-bottom: 20px;"></div>
    <div id="main2" style="height:300px;"></div>
    <p style="text-align: center;font-weight: bold;color: black;" id="wcgs">本月已完成工时:9999</p>
    <p style="text-align: center;font-weight: bold;color: black;" id="sygs">本月待完成工时:88888</p>
    <p style="text-align: center;font-weight: bold;color: black;" id="yysjlv">已用时间比率:30%</p>
    {{--    前面时间--}}
    <input type="hidden" value="{{$t1}}" class="t1">
    {{--    现在时间--}}
    <input type="hidden" value="{{$t2}}" class="t2">
    {{--    日--}}
    <input type="hidden" value="{{$t3}}" class="t3">
    {{--    日总数--}}
    <input type="hidden" value="{{$t4}}" class="t4">

    <link rel="stylesheet" href="{{URL::asset('css/picktime.css')}}">
    <script src="{{URL::asset('js/picktime.js')}}"></script>
    <script type="text/javascript" src="{{URL::asset('js/layui.all.js')}}"></script>
    <script>

        function startLoading(){
            $('body').loading({
                loadingWidth:220,
                title:'加载中',
                name:'pageloading',
                titleColor:'#fff',
                discColor:'#EDEEE9',
                discription:'',
                direction:'column',
                type:'origin',
                originBg:'#ECCFBB',
                originDivWidth:40,
                originDivHeight:40,
                originWidth:6,
                originHeight:6,
                smallLoading:false,
                loadingBg:'rgba(56,43,14,0.8)',
                loadingMaskBg:'rgba(66,66,66,0.2)'
            });
        }

        //监听加载状态改变
        //document.onreadystatechange = completeLoading;

        //加载状态为complete时移除loading效果
        // function completeLoading() {
        //     if (document.readyState == "complete") {
        //         //removeLoading('pageloading');
        //         //alert('加载完毕');
        //         setTimeout(function(){
        //             removeLoading('pageloading');
        //         },1000);
        //     }else{
        //         startLoading();
        //     }
        // }

        // ******************************************************
        function dosearch() {
            let res1 = $('#result1').val(),
                res2 = $('#result2').val(),
                dif  = DateMinus(res1,res2 );
            if(!res1 || !res2){
                layer.msg("查询日期不能为空");
                return false;
            }
            if(dif>7){
                layer.msg("间隔日期不能大于7天");
                return false;
            }else if(dif<7){
                layer.msg("间隔日期不能小于7天");
                return false;
            }
            showdata(res1,res2);
        }

        function DateMinus(date1,date2){//date1:小日期   date2:大日期
            var sdate = new Date(date1);
            var now = new Date(date2);
            var days = now.getTime() - sdate.getTime();
            var day = parseInt(days / (1000 * 60 * 60 * 24));
            return day;
        }

        function showdata(){
            let myChart1 = echarts.init(document.getElementById('main1'));
            let myChart2 = echarts.init(document.getElementById('main2'));
            let t1 = $(".t1").val(),t2 = $(".t2").val(),t3 = $(".t3").val(),t4 = $(".t4").val();
            //myChart3.setOption(option3);//柱状图

            $.get("report_col",{t1,t2,t3,t4}, res => {
                console.log(res);
                let {bharr,dateline,jgarr,jmarr,pielist} = res;
                let option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['金工', '精密', '钣焊']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            axisLabel: {interval: 0,rotate:40},
                            data: []
                        },
                    ],
                    yAxis: [
                        {
                            type: 'value',
                        },
                    ],
                    series: [
                        {name: '金工', type: 'bar', stack: '工时', data: []},
                        {name: '精密', type: 'bar', stack: '工时', data: []},
                        {name: '钣焊', type: 'bar', stack: '工时', data: []},
                    ]
                };
                option1.series[0].data = jgarr;
                option1.series[1].data = jmarr;
                option1.series[2].data = bharr;
                option1.xAxis[0].data  = dateline;//时间坐标
                // ***************************************************************************************
                myChart1.setOption(option1);//柱状图
                // ********************************************************************************************
                let option2 ={
                    tooltip: {formatter: '{a} <br/>{b} : {c}%'},
                    series: [
                        {
                            name: '工时指标',
                            type: 'gauge',
                            detail: {formatter: '{value}%'},
                            data: []//[{value: 30, name: '完成率1'}]
                        },
                    ]
                };
                option2.series[0]['data'].push({value: pielist['wc'], name: '完成工时'}) ;
                //option2.series[0]['data'].push({value: pielist['wwc'], name: '剩余工时'}) ;
                $('#wcgs').html(`本月已完成工时:${pielist['wcs']}(小时)`);
                $('#sygs').html(`本月待完成工时:${pielist['wwcs']}(小时)`);
                $('#yysjlv').html(`时间进度:${res['yysjbl']}`);

                myChart2.setOption(option2);//柱状图

            })
        }
        showdata();
        // (function($) {
        //     $.init();
        //     let result1 = $('#result1')[0],result2 = $('#result2')[0];
        //     //let result2 = $('#result2')[0];
        //     var btns = $('.btn');
        //     btns.each(function(i, btn) {
        //         btn.addEventListener('tap', function() {
        //             var optionsJson = this.getAttribute('data-options') || '{}';
        //             var options = JSON.parse(optionsJson);
        //             var id = this.getAttribute('id');
        //             /*
        //              * 首次显示时实例化组件
        //              * 示例为了简洁，将 options 放在了按钮的 dom 上
        //              * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
        //              */
        //             var picker = new $.DtPicker(options);
        //             picker.show(function(rs) {
        //                 /*
        //                  * rs.value 拼合后的 value
        //                  * rs.text 拼合后的 text
        //                  * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
        //                  * rs.m 月，用法同年
        //                  * rs.d 日，用法同年
        //                  * rs.h 时，用法同年
        //                  * rs.i 分（minutes 的第二个字母），用法同年
        //                  */
        //                 if(id=="demo2"){
        //                     result1.value = rs.text;
        //                 }else{
        //                     result2.value = rs.text;
        //                 }
        //
        //                 //console.log(rs.text);
        //                 //$('#result')[0].attr("value",rs.text);
        //                 /*
        //                  * 返回 false 可以阻止选择框的关闭
        //                  * return false;
        //                  */
        //                 /*
        //                  * 释放组件资源，释放后将将不能再操作组件
        //                  * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
        //                  * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
        //                  * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
        //                  */
        //                 picker.dispose();
        //             });
        //         }, false);
        //     });
        // })(mui);


        // ****************************************************
    </script>
    <script>


    </script>

    <style>#header {background-color: orangered;width: 100%;height: 50px;line-height: 50px;text-align: center;font-size: 20px;font-family: '黑体'}</style>
@endsection
